<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!--
  Python Tutor: https://github.com/pgbovine/OnlinePythonTutor/
  Copyright (C) Philip Guo (philip@pgbovine.net)
  LICENSE: https://github.com/pgbovine/OnlinePythonTutor/blob/master/LICENSE.txt
-->

<!-- OPT live programming prototype started on 2016-05-30 -->

<head>
  <title>Live Programming Mode - Python Tutor - Visualize Python and JavaScript code</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

  <!-- let Webpack take care of everything. Use the [hash] feature to
       create unique filenames for releases:
       https://webpack.github.io/docs/long-term-caching.html -->
  <script type="text/javascript" src="build/opt-live.bundle.js?60784563b9" charset="utf-8"></script>

<!-- insert google-analytics.txt contents here -->

</head>

<body>

  <div id="liveModeHeader">
  This mode is experimental. Use the <a href="visualize.html" target="_blank">regular Python Tutor</a> to <span style="font-weight: bold;">get live help</span> and use more features.

  <span id="surveyPane"></span>

  <!-- taken down on 2016-12-06
  <p>Help us improve this live programming mode by filling out this <a
  target="_blank"
  href="https://docs.google.com/forms/d/1XT-rPaWxDRNOPAfBxIqzCXs7nYGUgOjNofmUnuQZYV8/viewform">two-question
  survey</a>.</p>
  -->

  </div>

<table id="experimentalHeader">
<tr>
<td valign="top" id="headerTdLeft"></td>
<td valign="top" id="headerTdRight"></td>
</tr>
</table>

  <table>
    <tr>
      <td valign="top">
        <div id="pyInputPane">
          <div id="codeInputWarnings">Write code in
            <select id="pythonVersionSelector">
              <option value="2">Python 2.7</option>
              <option value="3" selected>Python 3.6</option>
              <option value="js">JavaScript ES6</option>
            </select>

            <span id="liveModeExtraWarning" style="color: #888; font-size: 8pt; float: right;">(drag lower right corner to resize code editor)</span>
          </div>
          <div id="someoneIsTypingDiv" style="color: #e93f34; font-weight: bold; display: none;">Someone is typing ...</div>

          <div id="codeInputPane"></div>
          <div id="legendDiv"></div>
          <div id="executionSlider" style="margin-top: 10px;"></div>

          <!-- copied and pasted from pytutor.js
               TODO: integrate all this together and modularize -->

          <div id="vcrControls" style="display: none;">
            <button id="jmpFirstInstr", type="button">&lt;&lt; First</button>
            <button id="jmpStepBack", type="button">&lt; Prev</button>
            <button id="jmpStepFwd", type="button">Next &gt;</button>
            <button id="jmpLastInstr", type="button">Last &gt;&gt;</button>
          </div>
          <div id="curInstr" style="display: none;"></div>

          <div id="rawUserInputDiv" style="display: none;">
            <span id="userInputPromptStr"></span>
            <input type="text" id="raw_input_textbox" size="30"/>
            <button id="raw_input_submit_btn">Submit</button>
          </div>

          <div id="frontendErrorOutput"></div>
        </div>
        <div id="eurekaSurveyPane"></div>
      </td>
      <td valign="top">
        <div id="pyOutputPane"/>
      </td>
    </tr>
  </table>

<div id="footer">

<div id="optionsPane">
  <select id="cumulativeModeSelector">
    <option value="false">hide exited frames [default]</option>
    <option value="true">show exited frames (Python)</option>
    <!-- <option value="holistic">holistic mode (experimental)</option> -->
  </select>
  <select id="heapPrimitivesSelector">
    <option value="false">inline primitives and try to nest objects</option>
    <option value="nevernest" selected>inline primitives but don't nest objects [default]</option>
    <option value="true">render all objects on the heap (Python)</option>
  </select>
  <select id="textualMemoryLabelsSelector">
    <option value="false">draw pointers as arrows [default]</option>
    <option value="true">use text labels for pointers</option>
  </select>
</div>

<p>
  <button id="genUrlBtn" class="smallBtn" type="button">Generate permanent link</button> <input type="text" id="urlOutput" size="65"/> (<a href="https://www.youtube.com/watch?v=h4q3UKdEFKE" target="_blank">video demo</a>)
</p>

<p style="margin-top: 35px;">
This live programming mode of
<a href="http://pythontutor.com/">Python Tutor</a> (<a href="https://github.com/pgbovine/OnlinePythonTutor">code on GitHub</a>) supports three
languages: Python <a href="https://docs.python.org/2.7/">2.7</a> and <a
href="https://docs.python.org/3.6/">3.6</a> with limited module
imports, and
JavaScript running in Node.js v6.0.0 with limited support for ES6.

Try the regular
<a href="http://pythontutor.com/visualize.html">Python Tutor</a>
visualizer for additional language support.</p>

</div>

</body>
</html>
